<template lang="html">
<div class="app-table">
  <el-row v-if="show" :gutter="10" class="filter">
    <slot></slot>
    <el-button size="small" @click="handleFilterReset">重置</el-button>
    <el-button type="primary" size="small" @click="handleFilterExec">筛选</el-button>
  </el-row>
  <slot name="table"></slot>
  <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
  :current-page="current"
  :page-sizes="[20, 50, 100]"
  :page-size="size"
  layout="total, sizes, prev, pager, next"
  :total="total">
  </el-pagination>
</div>
</template>

<style type="less">
.el-pagination {
  float: right;
}
</style>

<script>
export default {
  props: {
    total: Number,
    show: {
      type:Boolean,
      default: true
    }
  },
  data: function() {
    return {
      current: 1,
      size: 20
    };
  },
  methods: {
    handleFilterReset: function() {
      //console.log('handleFilterReset');
      //console.log(this.current);
      this.$emit('fetchData', {
        size: this.size,
        current: this.current,
      }, true);
    },
    handleFilterExec: function() {
      //console.log('handleFilterExec');
      this.current = 1;
      this.$emit('fetchData', {
        size: this.size,
        current: this.current,
      }, false);
    },
    handleSizeChange: function(size) {
      //console.log('handleSizeChange');
      // console.log(size);
      this.size = size;
      if (this.total <= size && this.total <= this.size) {} else {
        this.$emit('fetchData', {
          size: this.size,
          current: this.current
        });
      }
    },
    handleCurrentChange: function(to) {
      //console.log('handleCurrentChange');
      //console.log(to);
      this.current = to;
      this.$emit('fetchData', {
        size: this.size,
        current: this.current
      });
    }
  }
}
</script>
